<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;

onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    title: {
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#1E65D1'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['利润总额（亿元）', '人工成本总额（亿元）', '工资总额（亿元）'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '利润总额',
        type: 'line',
        data: [6.25, 17.19, 29.85, 42.78, 51.77, 60.51, 69.86, 79.1, 88.28, 96.89, 105.6, 114.86],
        smooth: true,
        symbol: "none",
        itemStyle: {
          color: '#4675FF'
        },
      },
      {
        name: '人工成本总额',
        type: 'line',
        data: [4.61, 12.82, 17.45, 24.58, 31.37, 38.32, 45.3, 52.36, 59.57, 66.41, 73.43, 80.56],
        symbol: "none",
        smooth: true,
        itemStyle: {
          color: '#FF922F'
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(250,180,101,0.3)",
              },
              {
                offset: 1,
                color: "rgba(250,180,101,0)",
              },
            ]),
            shadowColor: "rgba(250,180,101,0.2)",
            shadowBlur: 20,
          },
        },
      },
      {
        name: '工资总额',
        type: 'line',
        symbol: "none",
        data: [3.12, 7.8, 12.67, 17.28, 22.07, 27.01, 31.73, 36.31, 41.12, 45.82, 50.64, 55.24],
        smooth: true,
        itemStyle: {
          color: '#2FCDB6'
        }
      }
    ]
  }
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
</style>